<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.dataList" @query="getPointList" refresher-enabled="false">
      <view class="info box-border">
        <van-button
          @click="
            () => {
              data.timeShow = true;
            }
          "
          icon="sort"
          plain
        >
          {{ data.year }}年{{ data.month }}月
        </van-button>
        <view class="points flex flex-justify-center flex-items-center">
          <text v-if="data.income - data.expense >= 0">+ </text>
          <text v-else>-</text>
          <text>{{ data.income - data.expense }}</text>
          <text>积分</text>
        </view>
      </view>
      <view class="point-grid py-2 box-border border-rd-lg">
        <van-grid :column-num="2" :border="false">
          <van-grid-item use-slot>
            <view class="mb-3">积分获取</view>
            <view class="text-size-xl" style="color: #b68359">+ {{ data.income }}</view>
          </van-grid-item>
          <van-grid-item use-slot>
            <view class="mb-3">积分支出</view>
            <view class="text-size-xl">- {{ data.expense }}</view>
          </van-grid-item>
        </van-grid>
      </view>
      <view class="mt-20">
        <van-cell-group>
          <van-cell :title="item.content" :value="item.createDate" v-for="(item, index) in data.dataList" :key="index" />
        </van-cell-group>
      </view>
      <van-popup position="bottom" custom-style="height: 40%;" :show="data.timeShow" @close="onClose">
        <van-datetime-picker title="选择日期" @cancel="onClose" type="year-month" :value="data.currentDate" @confirm="onTimeConfirm" />
      </van-popup>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import Tools from '@/utils/tools';

interface IData {
  year: number;
  month: number;
  expense: number;
  income: number;
  timeShow: boolean;
  currentDate: number;
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  dataList: IPointsRecordListIsList[];
}

const data = reactive<IData>({
  year: new Date().getFullYear(),
  month: new Date().getMonth() + 1,
  expense: 0,
  income: 0,
  timeShow: false,
  currentDate: new Date().getTime(),
  pages: {
    pageNo: 1,
    pageSize: 10,
    totalPage: 0,
  },
  dataList: [],
});

const paging = ref();

onLoad(() => {
  getPointInfo();
});

const getPointList = (pageNo: number, pageSize: number) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  UserRequest.PointsRecordList({ pageNo, pageSize, year: data.year, month: data.month, hasLoading: true })
    .then((res) => {
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value!.complete(res.data.list);
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value!.complete(false);
    });
};

const getPointInfo = () => {
  UserRequest.CountByMonth({
    year: data.year,
    month: data.month,
  }).then((res) => {
    data.expense = res.data.expense;
    data.income = res.data.income;
  });
};

const onTimeConfirm = (event: any) => {
  const { year, month, day } = Tools.formatTimestampToDate(event.detail);
  data.year = year;
  data.month = Number(month);
  getPointInfo();
  nextTick(() => {
    paging.value.reload();
    onClose();
  });
};

const onClose = () => {
  data.timeShow = false;
};
</script>

<style lang="scss" scoped>
.main-box {
  position: relative;

  .info {
    z-index: -1;
    padding: 40rpx 0;
    width: 100%;
    height: 420rpx;
    text-align: center;
    background: linear-gradient(180deg, rgb(250 238 221), rgb(251 239 222));

    .points {
      width: 100%;
      height: 120px;

      text:nth-child(1) {
        font-size: 100rpx;
        color: #b5835a;
      }

      text:nth-child(2) {
        margin-right: 20rpx;
        font-size: 100rpx;
        color: #b5835a;
      }

      text:nth-child(3) {
        padding-top: 35rpx;
      }
    }
  }

  .point-grid {
    position: absolute;
    top: 356rpx;
    left: 50%;
    z-index: 10;
    width: 94%;
    height: auto;
    background-color: white;
    transform: translateX(-50%);
  }
}
</style>
